<script>
  import draggable from 'vuedraggable';
  export default {
    components: {
      draggable,
    },
    data() {
      return {
        images: [
          { id: 1, src: 'path_to_your_image_1.jpg' },
          { id: 2, src: 'path_to_your_image_2.jpg' },
          { id: 3, src: 'path_to_your_image_3.jpg' },
          { id: 4, src: 'path_to_your_image_4.jpg' },
          { id: 5, src: 'path_to_your_image_5.jpg' },
        ],
        dragOptions: {
          animation: 150,
        },
      };
    },
    methods: {
      checkClassify() {
        // 检查图片分类
        for (let i = 0; i < this.images.length - 1; i++) {
          // 这里假设图片靠近时，它们的 left 位置差小于 120px，你可以根据实际情况调整
          const distance = this.$refs.draggable.$el.children[i + 1].offsetLeft - this.$refs.draggable.$el.children[i].offsetLeft;
          if (distance < 120) {
            // 将相邻的两张图片划分为同一类，可以在这里执行相应的操作
            console.log(`图片 ${i + 1} 和 图片 ${i + 2} 是一类`);
          }
        }
      },
    },
  };
</script>
<template>
    <div>
      <draggable v-model="images" :options="dragOptions" @end="checkClassify">
        <div v-for="(image, index) in images" :key="index">
          <img :src="image.src" alt="Image" style="width: 100px; height: 100px;">
        </div>
      </draggable>
    </div>
</template>
  
